<template>
  <el-tree :data="treeData"
           :default-expanded-keys="['0']"
           :props="defaultProps"
           :expand-on-click-node="false"
           @node-click="handleNodeClick"
           node-key="id">
      <span class="custom-tree-node" slot-scope="{ node,data }">
        <el-tooltip class="item" content="请点击上级栏目" placement="bottom" v-if="data.disabled" 
        popper-class="testtooltip">
          <span class="notouch">{{ node.label }}</span>
        </el-tooltip>
        <span v-else>{{ node.label }}</span>
      </span>
  </el-tree>
</template>

<script>
export default {
  name: 'commonleftTree',
  data() {
    return {
      treeData: [
        {
          colName: '模块架构',
          subLanMu: [],
          id: '0',
        },
      ],
      defaultProps: {
        children: 'subLanMu',
        label: 'colName',
      },
      selectNode: null,
    }
  },
  props:{
    showOut:''
  },
  methods: {
    handleNodeClick(data) {
      this.selectNode = data
      this.$emit('getSelectNode', data)
    },
    getleftTree() {
      this.$api.getColumnInfoTree().then((res) => {
        if('in' === this.showOut){
          res.data.forEach(item=>{
            if(7===item.id){
              let that=this
              item.subLanMu.forEach((item1,index)=>{

                item1.subLanMu.forEach((item2,index)=>{
                  that.$set(item1.subLanMu[index],'disabled',true)
                })
              })
              console.log(888)
              console.log(item)
              this.treeData[0].subLanMu.push(item)
              this.$forceUpdate()
            }
          })

        }else if('out' === this.showOut){
          res.data.forEach(item=>{
            if(7!==item.id){
              this.treeData[0].subLanMu.push(item)
            }
          })
          //this.treeData[0].subLanMu.push(res.data[1])
        }else{
          this.treeData[0].subLanMu = res.data.filter(item=>{
            return item.isAddable=='1' || item.colName== '资讯中心'
          })
        }

      })
    },
  },
  mounted() {
    this.getleftTree()
  },
}
</script>
<style scoped lang="less">


.el-tree {
  background-color: transparent;
  padding-top: 10px;
  font-size: 16px;
}
/deep/.el-tree-node__content:hover{
  background-color:#EBF5FF !important;
  color: #187AFB;
}
.notouch{
  cursor: default;//url('../../assets/cursor.png'),auto;
  color: #999;;
}
.custom-tree-node:hover{
  color: #999!important;
}
/deep/ .el-tree-node__content:hover{
  background: transparent!important;
}
a img {
display: block;
width: 16px;
height: 16px;
}
.item{
  border: none;
}
// .custom-cursor {
//   cursor: url('custom-cursor.png'), auto;
// }

</style>
